import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts';
import { BarChart3 } from 'lucide-react';

const TrendChart = ({ data, title }) => {
  const CustomTooltip = ({ active, payload, label }) => {
    if (active && payload && payload.length) {
      return (
        <div className="glass-effect p-4 border border-white/30 rounded-xl shadow-xl backdrop-blur-xl">
          <p className="text-sm font-semibold text-gray-800 mb-1">时间: {label}</p>
          <div className="flex items-center space-x-2">
            <div className="w-2 h-2 bg-primary-500 rounded-full" />
            <p className="text-sm font-bold text-primary-600">
              热度: {payload[0].value}°
            </p>
          </div>
        </div>
      );
    }
    return null;
  };

  return (
    <div className="glass-effect rounded-3xl p-8 border border-white/20 backdrop-blur-xl shadow-xl">
      <div className="flex items-center space-x-3 mb-6">
        <div className="p-2 bg-gradient-to-r from-primary-500 to-accent-500 rounded-xl">
          <BarChart3 className="h-5 w-5 text-white" />
        </div>
        <h3 className="text-xl font-bold text-gray-800">{title || '热度趋势'}</h3>
      </div>
      <div className="h-80 relative">
        {/* 背景装饰 */}
        <div className="absolute inset-0 bg-gradient-to-r from-primary-50/30 to-accent-50/30 rounded-2xl" />
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
            <defs>
              <linearGradient id="colorGradient" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3}/>
                <stop offset="95%" stopColor="#3b82f6" stopOpacity={0.05}/>
              </linearGradient>
            </defs>
            <CartesianGrid 
              strokeDasharray="3 3" 
              stroke="#e2e8f0" 
              strokeOpacity={0.6}
            />
            <XAxis 
              dataKey="time" 
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 12, fill: '#64748b', fontWeight: '500' }}
              dy={10}
            />
            <YAxis 
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 12, fill: '#64748b', fontWeight: '500' }}
              dx={-10}
            />
            <Tooltip content={<CustomTooltip />} />
            <Area
              type="monotone"
              dataKey="heat"
              stroke="#3b82f6"
              strokeWidth={3}
              fill="url(#colorGradient)"
              dot={{ 
                fill: '#3b82f6', 
                strokeWidth: 3, 
                stroke: '#ffffff',
                r: 5 
              }}
              activeDot={{ 
                r: 8, 
                stroke: '#3b82f6', 
                strokeWidth: 3, 
                fill: '#ffffff',
                className: 'drop-shadow-lg'
              }}
            />
          </AreaChart>
        </ResponsiveContainer>
      </div>
      
      {/* 底部信息 */}
      <div className="mt-4 pt-4 border-t border-white/20">
        <div className="flex items-center justify-between text-sm">
          <span className="text-gray-600">实时更新</span>
          <div className="flex items-center space-x-2">
            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
            <span className="text-gray-600 font-medium">数据正常</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TrendChart;